<template>
    <el-button
        v-bind="{
            ...elProps,
            ...elShape
        }"
        :style="elStyles"
        v-on="elEvents"
    >
        {{ config.props.slot }}
    </el-button>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import type { PropType } from 'vue';
import { omit } from 'lodash-es';
import type { ComponentType } from '@/materials/index.d';

defineOptions({
    name: "PrimaryButton",
})

const props = defineProps({
    config: {
        type: Object as PropType<ComponentType>,
        required: true
    }
});

const elProps = computed(() => omit(props.config.props, ["slot", "shape"]));
const elStyles = computed(() => props.config.styles);
const elEvents = computed(() => props.config.events);

const elShape = computed(() => {
    const shape = props.config.props.shape;
    if (shape === 'round') {
        return { round: true};
    } else if (shape === 'circle') {
        return {circle: true};
    } else {
        return {};
    }
})
</script>